<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img1 {
            width: 100px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const img1 = document.getElementById('img1');
            const prev = document.getElementById('prev');
            const next = document.getElementById('next');

            const imgPaths = ["./img/1.jpg", "./img/2.png", "./img/3.jpg"];
            let currentIndex = 0;
            prev.onclick = function(){
                if(currentIndex > 0) currentIndex--;
                else currentIndex = imgPaths.length - 1;
                img1.src = imgPaths[currentIndex];
                console.log(currentIndex);
            }

            next.onclick = function(){
                if(currentIndex < 2) currentIndex++;
                else currentIndex = 0;
                img1.src = imgPaths[currentIndex];
                console.log(currentIndex);
            }
        })
    </script>
</head>

<body>
    <div class='outer'>
        <div class="img-wrapper">
            <img id="img1" src="./img/1.jpg" alt="这是一个图片">
        </div>

        <div class="btn-wrapper">
            <button id="prev">上一个</button>
            <button id="next">下一个</button>
        </div>
    </div>
</body>

</html>